<template>
  <div class="expert-edit-container">
    <el-card class="expert-card" shadow="never">
      <div slot="header" class="card-header">
        <span class="card-title">专家信息编辑</span>
      </div>
      
      <el-form 
        :model="form" 
        label-width="100px" 
        label-position="right"
        class="expert-form">
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="真实姓名" prop="realName">
              <el-input 
                v-model="form.realName" 
                placeholder="请输入真实姓名"
                clearable
                class="form-input">
              </el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input 
                v-model="form.phone" 
                placeholder="请输入手机号码"
                clearable
                class="form-input">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="从事专业" prop="profession">
              <el-input 
                v-model="form.profession" 
                placeholder="请输入从事专业"
                clearable
                class="form-input">
              </el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-input 
                v-model="form.position" 
                placeholder="请输入职位"
                clearable
                class="form-input">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="所属单位" prop="belong">
          <el-input 
            v-model="form.belong" 
            placeholder="请输入所属单位"
            clearable
            class="form-input">
          </el-input>
        </el-form-item>

        <el-form-item class="form-footer">
          <el-button 
            type="primary" 
            @click="addExpertInfo"
            :loading="submitting"
            icon="el-icon-check">
            保存修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getExpertInfo, editExpertInfo } from '../api/expert.js'

export default {
  data() {
    return {
      form: {
        realName: '',
        phone: '',
        profession: '',
        position: '',
        belong: ''
      },
      submitting: false
    }
  },
  methods: {
    async getExpertData() {
      try {
        const res = await getExpertInfo({})
        if (res && res.data) {
          this.form = { ...res.data }
        }
      } catch (err) {
        this.$message.error('获取专家信息失败')
        console.error(err)
      }
    },
    async addExpertInfo() {
      this.submitting = true
      try {
        const res = await editExpertInfo(this.form)
        if (res.flag) {
          this.$message.success('修改成功')
        } else {
          this.$message.error(res.message || '修改失败')
        }
      } catch (err) {
        this.$message.error('修改操作异常')
        console.error(err)
      } finally {
        this.submitting = false
      }
    }
  },
  mounted() {
    this.getExpertData()
  }
}
</script>

<style lang="less" scoped>
.expert-edit-container {
  padding: 20px;
  
  .expert-card {
    border-radius: 4px;
    
    .card-header {
      border-bottom: 1px solid #ebeef5;
      
      .card-title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }
    
    .expert-form {
      padding: 20px 30px;
      
      .form-input {
        width: 100%;
      }
      
      .form-footer {
        text-align: center;
        margin-top: 30px;
        
        .el-button {
          width: 200px;
        }
      }
    }
  }
}
</style>